<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
<style>
    table{
        border: 1px solid #eee;
        border-collapse: collapse;
    }
    th,td{
        border: 1px solid #000;
        padding: 10px 16px;
        text-align: center;
    }
    th{
        background-color: #aaa;
    }
    .count{
        margin: 0 5px;
    }
    
</style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
               constructor(props){
                super(props);
               this.state={
                   boooks:[
                       {id:1,name:'html',data:'2022-5-30',price:24,count:1},
                       {id:2,name:'css',data:'2022-5-30',price:44,count:2},
                       {id:3,name:'javascript',data:'2022-5-30',price:56,count:3},
                       {id:4,name:'node',data:'2022-5-30',price:34,count:4},
                       {id:5,name:'vue',data:'2022-5-30',price:66,count:5},
                       {id:6,name:'react',data:'2022-5-30',price:67,count:6},
                   ]

                }
            }
            getTotalPrice(){
                let totalprice=0;
                for(let item of this.state.books){
                    totalprice+=item.price*item.count;
                }
                // console.log(totalprice)
                return totalprice;
            }
           removeBook(index){
               this.setState({
                   books:this.state.books.filter((item,indey)=> index != indey)
               })
           }
            render(){
return(
    <div>
    <table>
    <thead>
    <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
    </tr>    
    </thead>
    <tbody>
    {
        this.state.boooks.map((item,index)=>{
           return(
               <tr>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.data}</td>
                <td>{item.price}</td>
                <td>
                <button>-</button> 
                <span className="count">{item.count}</span>
                <button>+</button>    
                 </td>
                <td><button onClick={e=>this.removeBook(index)}>移除</button></td>
                </tr>
           ) 
        })
    }
    </tbody>    
    </table>    
    <h2>总价格：{this.getTotalPrice}</h2>
    </div>
)
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))
    </script>
    
</body>
</html>